<template>
  <div class="search-box">
    <div class="flex">
      <div style="color: black">
        <el-icon> <Search /> </el-icon><span>筛选搜索</span>
      </div>
      <div>
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="submitFn" type="primary">查询搜索</el-button>
      </div>
    </div>
    <div style="padding-top: 20px">
      <el-form
        @submit.prevent="submitFn"
        ref="searchFormRef"
        :model="listParams"
      >
        <el-form-item prop="keyword" label="账号/姓名:" label-width="200px">
          <el-input v-model="listParams.keyword"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>

  <div class="add-box">
    <el-button type="primary" @click="addbrand">添加</el-button>
  </div>

  <el-table :data="tableData" border>
    <el-table-column width="50px" type="selection"></el-table-column>
    <el-table-column prop="id" label="编号"></el-table-column>
    <el-table-column prop="name" label="品牌名称"></el-table-column>
    <el-table-column prop="firstLetter" label="品牌首字母"></el-table-column>
    <el-table-column prop="sort" label="排序"></el-table-column>
    <el-table-column prop="factoryStatus" label="品牌制造商">
      <template #default="scope">
        <el-switch
          v-model="scope.row.factoryStatus"
          :active-value="1"
          :inactive-value="0"
          @change="changeHandle(scope.row)"
        ></el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="showStatus" label="是否显示">
      <template #default="scope">
        <el-switch
          v-model="scope.row.showStatus"
          :active-value="1"
          :inactive-value="0"
          @change="changeShowState(scope.row)"
        ></el-switch>
      </template>
    </el-table-column>
    <el-table-column label="相关">
      商品:<span style="color: hotpink">100</span> 评价:<span
        style="color: hotpink"
        >100</span
      >
    </el-table-column>
    <el-table-column prop="username" label="操作">
      <template #default="scope">
        <div style="display: flex">
          <el-button @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </div>
      </template>
    </el-table-column>
  </el-table>
  <!-- 需要汉化 -->
  <ElConfigProvider :locale="zhCn">
    <el-pagination
      background
      v-model:currentPage="listParams.pageNum"
      @size-change="pageSizeChagne"
      @current-change="currentChange"
      v-model:page-size="listParams.pageSize"
      layout="total,prev,sizes,prev, pager,next,jumper"
      :total="total"
      :page-sizes="[5, 10, 15]"
    />
  </ElConfigProvider>
</template>
<script setup lang="ts">
import { user } from "@/api/index";
import { reactive, ref, toRefs } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { useRouter } from "vue-router";

const changeHandle = (row: IGoodBrand) => {
  user
    .updateFacStateApi({ ids: row.id, factoryStatus: row.factoryStatus })
    .then((res) => {
      ElMessage({
        message: res.message,
        type: res.code === 200 ? "success" : "error",
      });
    });
};

const changeShowState = (row: IGoodBrand) => {
  user
    .updateShowStateApi({ ids: row.id, showStatus: row.showStatus })
    .then((res) => {
      ElMessage({
        message: res.message,
        type: res.code === 200 ? "success" : "error",
      });
    });
};
// 分配角色按钮
const handleEdit = (id: number) => {
  allocRoleId.value = id;
};
// 获取id
const handleDelete = (id: number) => {
  editId.value = id;
};
// 获取角色指定的id
const allocRoleId = ref(0);

// 点击编辑需要的id
const editId = ref(0);

interface IState {
  tableData: IGoodBrand[];
  listParams: user;
  total: number;
  totalPage: number;
}

const state = reactive<IState>({
  tableData: [],
  listParams: {
    keyword: "",
    pageNum: 1,
    pageSize: 10,
  },
  total: 0,
  totalPage: 0,
});

const searchFormRef = ref<FormInstance>();

// 分配角色的组件是否显示

const getList = () => {
  // 搜索跟之前第一次请求的不同就是 搜索要带 输入框里面的数据
  user.brandListApi(state.listParams).then((res) => {
    if (res.code === 200) {
      state.tableData = res.data.list;
      state.total = res.data.total;
      state.totalPage = res.data.totalPage;
      console.log(res.data.totalPage);
    }
  });
};

getList();
// 重置功能的实现：
// 1. 点击事件
// 2. 需要给el-from表单组件添加一个ref属性，得到该组件的实例
// 3. 点击的时候调用 组件实例的resetFields方法进行重置
// 4. 前提是 给 el-from 设置了 model 属性
// 5. 还需要给 el-form-item 设置相应的 prop 属性
const resetForm = () => {
  searchFormRef.value?.resetFields();
};

// 一次显示多少页
const pageSizeChagne = (value: number) => {
  getList();
};

const currentChange = (value: number) => {
  if (state.totalPage == value) {
    ElMessage.error("没有更多的信息");
  }
  getList();
};

// 查询按钮
const submitFn = () => {
  getList();
};

const router = useRouter();
const addbrand = () => {
  router.push("/pms/addBrand");
};

// 解构
let { tableData, listParams, total } = toRefs(state);
</script>
<style lang="less" scoped>
/deep/.cell {
  text-align: center;
}

/deep/.el-table_1_column_1 {
  text-align: center;
}

.add-box {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  margin: 20px 0;
  border-radius: 10px;
  box-shadow: 0 0 4px 2px #ccc;
}

.search-box {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;

  .flex {
    display: flex;
    justify-content: space-between;
  }
}
</style>
